<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../assets/js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>自定义输入框组件的调用</p>
        <p>msg:{{ msg }}</p>
        <my-input :msg="msg" @update:msg="setMsg"></my-input>
        <hr>
        <p>技能:{{ list }}</p>
        <ul>
            <li>
                html ：<my-checkbox value="html" :list="list" @update:list=" updateList "></my-checkbox>
            </li>
            <li>
                css ：<my-checkbox value="css" :list="list" @update:list=" updateList "></my-checkbox>
            </li> 
            <li>
                js ：<my-checkbox value="js" :list="list" @update:list=" updateList "></my-checkbox>
            </li>
        </ul>
        <hr>
        <p>技能:{{ list2 }}</p>
        <ul>
            <li>
                html ：<my-checkbox-b value="html" :list="list2" @update:value="updateList2"></my-checkbox-b>
            </li>
            <li>
                css ：<my-checkbox-b value="css" :list="list2" @update:value="updateList2"></my-checkbox-b>
            </li> 
            <li>
                js ：<my-checkbox-b value="js" :list="list2" @update:value="updateList2"></my-checkbox-b>
            </li>
        </ul>
        <hr>
        <p>
            {{ flag }}
            <my-checkbox-b :list="flag" @update:value="updateFlag"></my-checkbox-b>
        </p>
    </div>

    <script type="text/x-template" id="my-input">
        <div>
            <!-- <input type="text" v-model="msg"> -->
            <input type="text" :value="msg" @input="upadteMsg($event.target.value)">  
        </div>
    </script>

    <script type="text/x-template" id="my-checkbox">
        <label>
            <!-- <input type="checkbox" :value="value" v-model="list"> -->
            <input type="checkbox" :value="value" :checked=" list.includes(value) " @change="updateMsg($event.target.checked)">
        </label>
    </script>

    <script type="text/x-template" id="my-checkbox-b">
        <label>
            <input type="checkbox" :value="value" v-model="arr">
        </label>
    </script>

    <script>
        Vue.component("MyInput", {
            template:"#my-input",
            // data() {
            //     return {
            //         msg:"默认值"
            //     }
            // },
            props:["msg"],
            methods: {
                upadteMsg(nv){
                    this.$emit("update:msg",nv)
                }
            },
        })

        Vue.component("MyCheckbox",{
            template:"#my-checkbox",
            props:["value","list"],
            // data() {
            //     return {
            //         list:[]
            //     }
            // },
            methods: {
                updateMsg(flag){
                    let temp = new Set(this.list);
                    if(flag){
                        temp.add(this.value);
                    }else{
                        temp.delete(this.value)
                    }
                    this.$emit("update:list",Array.from(temp)) 
                }
            },
        })

        Vue.component("MyCheckboxB",{
            template:"#my-checkbox-b",
            props:["value","list"],
            computed:{
                arr:{
                    get(){
                        return this.list
                    },
                    set(nv){
                        console.log(nv)
                        this.$emit("update:value",nv)
                    }
                }
            }
        })

        new Vue({
            el:"#app",
            data:{
                msg:"父组件操作数据",
                list:["html","js"],
                list2:["html","js"],
                flag:false
            },
            methods:{
                setMsg(nv){
                    this.msg = nv;
                },
                updateList(nv){
                    this.list = nv
                },
                updateList2(nv){
                    this.list2 = nv;
                },
                updateFlag(nv){
                    this.flag = nv;
                }
            }
            
        })
    </script>
</body>
</html>